<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>IconFont Demo</title>
    <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon" />
    <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>

<body>
    <div class="main">
        <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
        <div class="nav-tabs">
            <ul id="tabs" class="dib-box">
                <li class="dib active"><span>Unicode</span></li>
                <li class="dib"><span>Font class</span></li>
                <li class="dib"><span>Symbol</span></li>
            </ul>

            <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1276722" target="_blank" class="nav-more">查看项目</a>

        </div>
        <div class="tab-container">
            <div class="content unicode" style="display: block;">
                <ul class="icon_lists dib-box">

                    <li class="dib">
                        <span class="icon iconfont">&#xe633;</span>
                        <div class="name">view</div>
                        <div class="code-name">&amp;#xe633;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe634;</span>
                        <div class="name">view_off</div>
                        <div class="code-name">&amp;#xe634;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe635;</span>
                        <div class="name">message</div>
                        <div class="code-name">&amp;#xe635;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe636;</span>
                        <div class="name">message_unread</div>
                        <div class="code-name">&amp;#xe636;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe637;</span>
                        <div class="name">record</div>
                        <div class="code-name">&amp;#xe637;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe638;</span>
                        <div class="name">time</div>
                        <div class="code-name">&amp;#xe638;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe639;</span>
                        <div class="name">credits</div>
                        <div class="code-name">&amp;#xe639;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe63a;</span>
                        <div class="name">renew</div>
                        <div class="code-name">&amp;#xe63a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe63b;</span>
                        <div class="name">order</div>
                        <div class="code-name">&amp;#xe63b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe63c;</span>
                        <div class="name">order_unread</div>
                        <div class="code-name">&amp;#xe63c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe63d;</span>
                        <div class="name">cart_empty</div>
                        <div class="code-name">&amp;#xe63d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe63e;</span>
                        <div class="name">cart</div>
                        <div class="code-name">&amp;#xe63e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe63f;</span>
                        <div class="name">search</div>
                        <div class="code-name">&amp;#xe63f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe640;</span>
                        <div class="name">edit</div>
                        <div class="code-name">&amp;#xe640;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe641;</span>
                        <div class="name">link</div>
                        <div class="code-name">&amp;#xe641;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe642;</span>
                        <div class="name">share</div>
                        <div class="code-name">&amp;#xe642;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe643;</span>
                        <div class="name">setting</div>
                        <div class="code-name">&amp;#xe643;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe644;</span>
                        <div class="name">upload</div>
                        <div class="code-name">&amp;#xe644;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe645;</span>
                        <div class="name">download</div>
                        <div class="code-name">&amp;#xe645;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe646;</span>
                        <div class="name">play</div>
                        <div class="code-name">&amp;#xe646;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe647;</span>
                        <div class="name">region</div>
                        <div class="code-name">&amp;#xe647;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe648;</span>
                        <div class="name">discount</div>
                        <div class="code-name">&amp;#xe648;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe649;</span>
                        <div class="name">notification</div>
                        <div class="code-name">&amp;#xe649;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe64a;</span>
                        <div class="name">notification_off</div>
                        <div class="code-name">&amp;#xe64a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe64b;</span>
                        <div class="name">phonecall</div>
                        <div class="code-name">&amp;#xe64b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe64c;</span>
                        <div class="name">phonecall_off</div>
                        <div class="code-name">&amp;#xe64c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe64d;</span>
                        <div class="name">lock</div>
                        <div class="code-name">&amp;#xe64d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe64e;</span>
                        <div class="name">unlock</div>
                        <div class="code-name">&amp;#xe64e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe64f;</span>
                        <div class="name">ET</div>
                        <div class="code-name">&amp;#xe64f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe650;</span>
                        <div class="name">flow</div>
                        <div class="code-name">&amp;#xe650;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe651;</span>
                        <div class="name">filter</div>
                        <div class="code-name">&amp;#xe651;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe652;</span>
                        <div class="name">calculator</div>
                        <div class="code-name">&amp;#xe652;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe653;</span>
                        <div class="name">image</div>
                        <div class="code-name">&amp;#xe653;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe654;</span>
                        <div class="name">email</div>
                        <div class="code-name">&amp;#xe654;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe655;</span>
                        <div class="name">copy</div>
                        <div class="code-name">&amp;#xe655;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe656;</span>
                        <div class="name">user</div>
                        <div class="code-name">&amp;#xe656;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe657;</span>
                        <div class="name">customer_service</div>
                        <div class="code-name">&amp;#xe657;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe658;</span>
                        <div class="name">sub_account</div>
                        <div class="code-name">&amp;#xe658;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe659;</span>
                        <div class="name">partner</div>
                        <div class="code-name">&amp;#xe659;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe65a;</span>
                        <div class="name">list</div>
                        <div class="code-name">&amp;#xe65a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe65b;</span>
                        <div class="name">international</div>
                        <div class="code-name">&amp;#xe65b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe65c;</span>
                        <div class="name">refresh</div>
                        <div class="code-name">&amp;#xe65c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe65d;</span>
                        <div class="name">close_filled</div>
                        <div class="code-name">&amp;#xe65d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe65e;</span>
                        <div class="name">check</div>
                        <div class="code-name">&amp;#xe65e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe65f;</span>
                        <div class="name">close</div>
                        <div class="code-name">&amp;#xe65f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe660;</span>
                        <div class="name">check_filled</div>
                        <div class="code-name">&amp;#xe660;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe661;</span>
                        <div class="name">forbidden</div>
                        <div class="code-name">&amp;#xe661;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe662;</span>
                        <div class="name">forbidden_filled</div>
                        <div class="code-name">&amp;#xe662;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe663;</span>
                        <div class="name">info_filled</div>
                        <div class="code-name">&amp;#xe663;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe664;</span>
                        <div class="name">info</div>
                        <div class="code-name">&amp;#xe664;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe665;</span>
                        <div class="name">help_filled</div>
                        <div class="code-name">&amp;#xe665;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe666;</span>
                        <div class="name">help</div>
                        <div class="code-name">&amp;#xe666;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe667;</span>
                        <div class="name">caution</div>
                        <div class="code-name">&amp;#xe667;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe668;</span>
                        <div class="name">caution_filled</div>
                        <div class="code-name">&amp;#xe668;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe669;</span>
                        <div class="name">like</div>
                        <div class="code-name">&amp;#xe669;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe66a;</span>
                        <div class="name">like_filled</div>
                        <div class="code-name">&amp;#xe66a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe66b;</span>
                        <div class="name">star</div>
                        <div class="code-name">&amp;#xe66b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe66c;</span>
                        <div class="name">star_filled</div>
                        <div class="code-name">&amp;#xe66c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe66d;</span>
                        <div class="name">arrow_up</div>
                        <div class="code-name">&amp;#xe66d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe66e;</span>
                        <div class="name">arrow_left</div>
                        <div class="code-name">&amp;#xe66e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe66f;</span>
                        <div class="name">arrow_down</div>
                        <div class="code-name">&amp;#xe66f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe670;</span>
                        <div class="name">arrow_right</div>
                        <div class="code-name">&amp;#xe670;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe671;</span>
                        <div class="name">page_first</div>
                        <div class="code-name">&amp;#xe671;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe672;</span>
                        <div class="name">down_to_bottom</div>
                        <div class="code-name">&amp;#xe672;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe673;</span>
                        <div class="name">up_to_top</div>
                        <div class="code-name">&amp;#xe673;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe674;</span>
                        <div class="name">page_last</div>
                        <div class="code-name">&amp;#xe674;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe675;</span>
                        <div class="name">page_turning_left</div>
                        <div class="code-name">&amp;#xe675;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe676;</span>
                        <div class="name">page_turning_right</div>
                        <div class="code-name">&amp;#xe676;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe677;</span>
                        <div class="name">show_less</div>
                        <div class="code-name">&amp;#xe677;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe678;</span>
                        <div class="name">show_more</div>
                        <div class="code-name">&amp;#xe678;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe679;</span>
                        <div class="name">social_fb</div>
                        <div class="code-name">&amp;#xe679;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe67a;</span>
                        <div class="name">social_linkedin</div>
                        <div class="code-name">&amp;#xe67a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe67b;</span>
                        <div class="name">social_sina</div>
                        <div class="code-name">&amp;#xe67b;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe67c;</span>
                        <div class="name">social_google</div>
                        <div class="code-name">&amp;#xe67c;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe67d;</span>
                        <div class="name">social_naver</div>
                        <div class="code-name">&amp;#xe67d;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe67e;</span>
                        <div class="name">social_stackflow</div>
                        <div class="code-name">&amp;#xe67e;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe67f;</span>
                        <div class="name">social_youtube</div>
                        <div class="code-name">&amp;#xe67f;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe680;</span>
                        <div class="name">social_github</div>
                        <div class="code-name">&amp;#xe680;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe681;</span>
                        <div class="name">social_twitter</div>
                        <div class="code-name">&amp;#xe681;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe682;</span>
                        <div class="name">applets</div>
                        <div class="code-name">&amp;#xe682;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe683;</span>
                        <div class="name">social_wechat</div>
                        <div class="code-name">&amp;#xe683;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe684;</span>
                        <div class="name">social_server_fault</div>
                        <div class="code-name">&amp;#xe684;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe685;</span>
                        <div class="name">balance</div>
                        <div class="code-name">&amp;#xe685;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe686;</span>
                        <div class="name">go-to-link</div>
                        <div class="code-name">&amp;#xe686;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe687;</span>
                        <div class="name">benefits</div>
                        <div class="code-name">&amp;#xe687;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe688;</span>
                        <div class="name">dingtalk</div>
                        <div class="code-name">&amp;#xe688;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe689;</span>
                        <div class="name">alipay</div>
                        <div class="code-name">&amp;#xe689;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe68a;</span>
                        <div class="name">taobao</div>
                        <div class="code-name">&amp;#xe68a;</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont">&#xe68b;</span>
                        <div class="name">1688</div>
                        <div class="code-name">&amp;#xe68b;</div>
                    </li>

                </ul>
                <div class="article markdown">
                    <h2 id="unicode-">Unicode 引用</h2>
                    <hr>

                    <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
                    <ul>
                        <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
                        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
                        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
                    </ul>
                    <blockquote>
                        <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
                    </blockquote>
                    <p>Unicode 使用步骤如下：</p>
                    <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
                    <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
                    <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
                    <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
                    <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
                    <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
                    <blockquote>
                        <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                    </blockquote>
                </div>
            </div>
            <div class="content font-class">
                <ul class="icon_lists dib-box">

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test"></span>
                        <div class="name">
                            view
                        </div>
                        <div class="code-name">.icon-icon-test
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test1"></span>
                        <div class="name">
                            view_off
                        </div>
                        <div class="code-name">.icon-icon-test1
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test2"></span>
                        <div class="name">
                            message
                        </div>
                        <div class="code-name">.icon-icon-test2
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test3"></span>
                        <div class="name">
                            message_unread
                        </div>
                        <div class="code-name">.icon-icon-test3
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test4"></span>
                        <div class="name">
                            record
                        </div>
                        <div class="code-name">.icon-icon-test4
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test5"></span>
                        <div class="name">
                            time
                        </div>
                        <div class="code-name">.icon-icon-test5
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test6"></span>
                        <div class="name">
                            credits
                        </div>
                        <div class="code-name">.icon-icon-test6
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test7"></span>
                        <div class="name">
                            renew
                        </div>
                        <div class="code-name">.icon-icon-test7
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test8"></span>
                        <div class="name">
                            order
                        </div>
                        <div class="code-name">.icon-icon-test8
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test9"></span>
                        <div class="name">
                            order_unread
                        </div>
                        <div class="code-name">.icon-icon-test9
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test10"></span>
                        <div class="name">
                            cart_empty
                        </div>
                        <div class="code-name">.icon-icon-test10
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test11"></span>
                        <div class="name">
                            cart
                        </div>
                        <div class="code-name">.icon-icon-test11
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test12"></span>
                        <div class="name">
                            search
                        </div>
                        <div class="code-name">.icon-icon-test12
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test13"></span>
                        <div class="name">
                            edit
                        </div>
                        <div class="code-name">.icon-icon-test13
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test14"></span>
                        <div class="name">
                            link
                        </div>
                        <div class="code-name">.icon-icon-test14
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test15"></span>
                        <div class="name">
                            share
                        </div>
                        <div class="code-name">.icon-icon-test15
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test16"></span>
                        <div class="name">
                            setting
                        </div>
                        <div class="code-name">.icon-icon-test16
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test17"></span>
                        <div class="name">
                            upload
                        </div>
                        <div class="code-name">.icon-icon-test17
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test18"></span>
                        <div class="name">
                            download
                        </div>
                        <div class="code-name">.icon-icon-test18
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test19"></span>
                        <div class="name">
                            play
                        </div>
                        <div class="code-name">.icon-icon-test19
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test20"></span>
                        <div class="name">
                            region
                        </div>
                        <div class="code-name">.icon-icon-test20
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test21"></span>
                        <div class="name">
                            discount
                        </div>
                        <div class="code-name">.icon-icon-test21
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test22"></span>
                        <div class="name">
                            notification
                        </div>
                        <div class="code-name">.icon-icon-test22
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test23"></span>
                        <div class="name">
                            notification_off
                        </div>
                        <div class="code-name">.icon-icon-test23
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test24"></span>
                        <div class="name">
                            phonecall
                        </div>
                        <div class="code-name">.icon-icon-test24
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test25"></span>
                        <div class="name">
                            phonecall_off
                        </div>
                        <div class="code-name">.icon-icon-test25
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test26"></span>
                        <div class="name">
                            lock
                        </div>
                        <div class="code-name">.icon-icon-test26
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test27"></span>
                        <div class="name">
                            unlock
                        </div>
                        <div class="code-name">.icon-icon-test27
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test28"></span>
                        <div class="name">
                            ET
                        </div>
                        <div class="code-name">.icon-icon-test28
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test29"></span>
                        <div class="name">
                            flow
                        </div>
                        <div class="code-name">.icon-icon-test29
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test30"></span>
                        <div class="name">
                            filter
                        </div>
                        <div class="code-name">.icon-icon-test30
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test31"></span>
                        <div class="name">
                            calculator
                        </div>
                        <div class="code-name">.icon-icon-test31
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test32"></span>
                        <div class="name">
                            image
                        </div>
                        <div class="code-name">.icon-icon-test32
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test33"></span>
                        <div class="name">
                            email
                        </div>
                        <div class="code-name">.icon-icon-test33
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test34"></span>
                        <div class="name">
                            copy
                        </div>
                        <div class="code-name">.icon-icon-test34
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test35"></span>
                        <div class="name">
                            user
                        </div>
                        <div class="code-name">.icon-icon-test35
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test36"></span>
                        <div class="name">
                            customer_service
                        </div>
                        <div class="code-name">.icon-icon-test36
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test37"></span>
                        <div class="name">
                            sub_account
                        </div>
                        <div class="code-name">.icon-icon-test37
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test38"></span>
                        <div class="name">
                            partner
                        </div>
                        <div class="code-name">.icon-icon-test38
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test39"></span>
                        <div class="name">
                            list
                        </div>
                        <div class="code-name">.icon-icon-test39
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test40"></span>
                        <div class="name">
                            international
                        </div>
                        <div class="code-name">.icon-icon-test40
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test41"></span>
                        <div class="name">
                            refresh
                        </div>
                        <div class="code-name">.icon-icon-test41
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test42"></span>
                        <div class="name">
                            close_filled
                        </div>
                        <div class="code-name">.icon-icon-test42
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test43"></span>
                        <div class="name">
                            check
                        </div>
                        <div class="code-name">.icon-icon-test43
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test44"></span>
                        <div class="name">
                            close
                        </div>
                        <div class="code-name">.icon-icon-test44
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test45"></span>
                        <div class="name">
                            check_filled
                        </div>
                        <div class="code-name">.icon-icon-test45
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test46"></span>
                        <div class="name">
                            forbidden
                        </div>
                        <div class="code-name">.icon-icon-test46
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test47"></span>
                        <div class="name">
                            forbidden_filled
                        </div>
                        <div class="code-name">.icon-icon-test47
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test48"></span>
                        <div class="name">
                            info_filled
                        </div>
                        <div class="code-name">.icon-icon-test48
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test49"></span>
                        <div class="name">
                            info
                        </div>
                        <div class="code-name">.icon-icon-test49
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test50"></span>
                        <div class="name">
                            help_filled
                        </div>
                        <div class="code-name">.icon-icon-test50
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test51"></span>
                        <div class="name">
                            help
                        </div>
                        <div class="code-name">.icon-icon-test51
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test52"></span>
                        <div class="name">
                            caution
                        </div>
                        <div class="code-name">.icon-icon-test52
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test53"></span>
                        <div class="name">
                            caution_filled
                        </div>
                        <div class="code-name">.icon-icon-test53
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test54"></span>
                        <div class="name">
                            like
                        </div>
                        <div class="code-name">.icon-icon-test54
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test55"></span>
                        <div class="name">
                            like_filled
                        </div>
                        <div class="code-name">.icon-icon-test55
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test56"></span>
                        <div class="name">
                            star
                        </div>
                        <div class="code-name">.icon-icon-test56
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test57"></span>
                        <div class="name">
                            star_filled
                        </div>
                        <div class="code-name">.icon-icon-test57
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test58"></span>
                        <div class="name">
                            arrow_up
                        </div>
                        <div class="code-name">.icon-icon-test58
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test59"></span>
                        <div class="name">
                            arrow_left
                        </div>
                        <div class="code-name">.icon-icon-test59
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test60"></span>
                        <div class="name">
                            arrow_down
                        </div>
                        <div class="code-name">.icon-icon-test60
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test61"></span>
                        <div class="name">
                            arrow_right
                        </div>
                        <div class="code-name">.icon-icon-test61
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test62"></span>
                        <div class="name">
                            page_first
                        </div>
                        <div class="code-name">.icon-icon-test62
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test63"></span>
                        <div class="name">
                            down_to_bottom
                        </div>
                        <div class="code-name">.icon-icon-test63
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test64"></span>
                        <div class="name">
                            up_to_top
                        </div>
                        <div class="code-name">.icon-icon-test64
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test65"></span>
                        <div class="name">
                            page_last
                        </div>
                        <div class="code-name">.icon-icon-test65
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test66"></span>
                        <div class="name">
                            page_turning_left
                        </div>
                        <div class="code-name">.icon-icon-test66
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test67"></span>
                        <div class="name">
                            page_turning_right
                        </div>
                        <div class="code-name">.icon-icon-test67
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test68"></span>
                        <div class="name">
                            show_less
                        </div>
                        <div class="code-name">.icon-icon-test68
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test69"></span>
                        <div class="name">
                            show_more
                        </div>
                        <div class="code-name">.icon-icon-test69
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test70"></span>
                        <div class="name">
                            social_fb
                        </div>
                        <div class="code-name">.icon-icon-test70
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test71"></span>
                        <div class="name">
                            social_linkedin
                        </div>
                        <div class="code-name">.icon-icon-test71
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test72"></span>
                        <div class="name">
                            social_sina
                        </div>
                        <div class="code-name">.icon-icon-test72
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test73"></span>
                        <div class="name">
                            social_google
                        </div>
                        <div class="code-name">.icon-icon-test73
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test74"></span>
                        <div class="name">
                            social_naver
                        </div>
                        <div class="code-name">.icon-icon-test74
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test75"></span>
                        <div class="name">
                            social_stackflow
                        </div>
                        <div class="code-name">.icon-icon-test75
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test76"></span>
                        <div class="name">
                            social_youtube
                        </div>
                        <div class="code-name">.icon-icon-test76
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test77"></span>
                        <div class="name">
                            social_github
                        </div>
                        <div class="code-name">.icon-icon-test77
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test78"></span>
                        <div class="name">
                            social_twitter
                        </div>
                        <div class="code-name">.icon-icon-test78
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test79"></span>
                        <div class="name">
                            applets
                        </div>
                        <div class="code-name">.icon-icon-test79
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test80"></span>
                        <div class="name">
                            social_wechat
                        </div>
                        <div class="code-name">.icon-icon-test80
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test81"></span>
                        <div class="name">
                            social_server_fault
                        </div>
                        <div class="code-name">.icon-icon-test81
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test82"></span>
                        <div class="name">
                            balance
                        </div>
                        <div class="code-name">.icon-icon-test82
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test83"></span>
                        <div class="name">
                            go-to-link
                        </div>
                        <div class="code-name">.icon-icon-test83
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test84"></span>
                        <div class="name">
                            benefits
                        </div>
                        <div class="code-name">.icon-icon-test84
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-dingtalk"></span>
                        <div class="name">
                            dingtalk
                        </div>
                        <div class="code-name">.icon-dingtalk
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-alipay"></span>
                        <div class="name">
                            alipay
                        </div>
                        <div class="code-name">.icon-alipay
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-taobao"></span>
                        <div class="name">
                            taobao
                        </div>
                        <div class="code-name">.icon-taobao
                        </div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test85"></span>
                        <div class="name">
                            1688
                        </div>
                        <div class="code-name">.icon-icon-test85
                        </div>
                    </li>

                </ul>
                <div class="article markdown">
                    <h2 id="font-class-">font-class 引用</h2>
                    <hr>

                    <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
                    <p>与 Unicode 使用方式相比，具有如下特点：</p>
                    <ul>
                        <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
                        <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
                        <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
                        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
                    </ul>
                    <p>使用步骤如下：</p>
                    <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
                    <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
                    <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
                    <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
                    <blockquote>
                        <p>" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                    </blockquote>
                </div>
            </div>
            <div class="content symbol">
                <ul class="icon_lists dib-box">

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                        <div class="name">view</div>
                        <div class="code-name">#icon-icon-test</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test1"></use>
                </svg>
                        <div class="name">view_off</div>
                        <div class="code-name">#icon-icon-test1</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test2"></use>
                </svg>
                        <div class="name">message</div>
                        <div class="code-name">#icon-icon-test2</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test3"></use>
                </svg>
                        <div class="name">message_unread</div>
                        <div class="code-name">#icon-icon-test3</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test4"></use>
                </svg>
                        <div class="name">record</div>
                        <div class="code-name">#icon-icon-test4</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test5"></use>
                </svg>
                        <div class="name">time</div>
                        <div class="code-name">#icon-icon-test5</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test6"></use>
                </svg>
                        <div class="name">credits</div>
                        <div class="code-name">#icon-icon-test6</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test7"></use>
                </svg>
                        <div class="name">renew</div>
                        <div class="code-name">#icon-icon-test7</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test8"></use>
                </svg>
                        <div class="name">order</div>
                        <div class="code-name">#icon-icon-test8</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test9"></use>
                </svg>
                        <div class="name">order_unread</div>
                        <div class="code-name">#icon-icon-test9</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test10"></use>
                </svg>
                        <div class="name">cart_empty</div>
                        <div class="code-name">#icon-icon-test10</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test11"></use>
                </svg>
                        <div class="name">cart</div>
                        <div class="code-name">#icon-icon-test11</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test12"></use>
                </svg>
                        <div class="name">search</div>
                        <div class="code-name">#icon-icon-test12</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test13"></use>
                </svg>
                        <div class="name">edit</div>
                        <div class="code-name">#icon-icon-test13</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test14"></use>
                </svg>
                        <div class="name">link</div>
                        <div class="code-name">#icon-icon-test14</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test15"></use>
                </svg>
                        <div class="name">share</div>
                        <div class="code-name">#icon-icon-test15</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test16"></use>
                </svg>
                        <div class="name">setting</div>
                        <div class="code-name">#icon-icon-test16</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test17"></use>
                </svg>
                        <div class="name">upload</div>
                        <div class="code-name">#icon-icon-test17</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test18"></use>
                </svg>
                        <div class="name">download</div>
                        <div class="code-name">#icon-icon-test18</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test19"></use>
                </svg>
                        <div class="name">play</div>
                        <div class="code-name">#icon-icon-test19</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test20"></use>
                </svg>
                        <div class="name">region</div>
                        <div class="code-name">#icon-icon-test20</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test21"></use>
                </svg>
                        <div class="name">discount</div>
                        <div class="code-name">#icon-icon-test21</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test22"></use>
                </svg>
                        <div class="name">notification</div>
                        <div class="code-name">#icon-icon-test22</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test23"></use>
                </svg>
                        <div class="name">notification_off</div>
                        <div class="code-name">#icon-icon-test23</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test24"></use>
                </svg>
                        <div class="name">phonecall</div>
                        <div class="code-name">#icon-icon-test24</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test25"></use>
                </svg>
                        <div class="name">phonecall_off</div>
                        <div class="code-name">#icon-icon-test25</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test26"></use>
                </svg>
                        <div class="name">lock</div>
                        <div class="code-name">#icon-icon-test26</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test27"></use>
                </svg>
                        <div class="name">unlock</div>
                        <div class="code-name">#icon-icon-test27</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test28"></use>
                </svg>
                        <div class="name">ET</div>
                        <div class="code-name">#icon-icon-test28</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test29"></use>
                </svg>
                        <div class="name">flow</div>
                        <div class="code-name">#icon-icon-test29</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test30"></use>
                </svg>
                        <div class="name">filter</div>
                        <div class="code-name">#icon-icon-test30</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test31"></use>
                </svg>
                        <div class="name">calculator</div>
                        <div class="code-name">#icon-icon-test31</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test32"></use>
                </svg>
                        <div class="name">image</div>
                        <div class="code-name">#icon-icon-test32</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test33"></use>
                </svg>
                        <div class="name">email</div>
                        <div class="code-name">#icon-icon-test33</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test34"></use>
                </svg>
                        <div class="name">copy</div>
                        <div class="code-name">#icon-icon-test34</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test35"></use>
                </svg>
                        <div class="name">user</div>
                        <div class="code-name">#icon-icon-test35</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test36"></use>
                </svg>
                        <div class="name">customer_service</div>
                        <div class="code-name">#icon-icon-test36</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test37"></use>
                </svg>
                        <div class="name">sub_account</div>
                        <div class="code-name">#icon-icon-test37</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test38"></use>
                </svg>
                        <div class="name">partner</div>
                        <div class="code-name">#icon-icon-test38</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test39"></use>
                </svg>
                        <div class="name">list</div>
                        <div class="code-name">#icon-icon-test39</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test40"></use>
                </svg>
                        <div class="name">international</div>
                        <div class="code-name">#icon-icon-test40</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test41"></use>
                </svg>
                        <div class="name">refresh</div>
                        <div class="code-name">#icon-icon-test41</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test42"></use>
                </svg>
                        <div class="name">close_filled</div>
                        <div class="code-name">#icon-icon-test42</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test43"></use>
                </svg>
                        <div class="name">check</div>
                        <div class="code-name">#icon-icon-test43</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test44"></use>
                </svg>
                        <div class="name">close</div>
                        <div class="code-name">#icon-icon-test44</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test45"></use>
                </svg>
                        <div class="name">check_filled</div>
                        <div class="code-name">#icon-icon-test45</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test46"></use>
                </svg>
                        <div class="name">forbidden</div>
                        <div class="code-name">#icon-icon-test46</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test47"></use>
                </svg>
                        <div class="name">forbidden_filled</div>
                        <div class="code-name">#icon-icon-test47</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test48"></use>
                </svg>
                        <div class="name">info_filled</div>
                        <div class="code-name">#icon-icon-test48</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test49"></use>
                </svg>
                        <div class="name">info</div>
                        <div class="code-name">#icon-icon-test49</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test50"></use>
                </svg>
                        <div class="name">help_filled</div>
                        <div class="code-name">#icon-icon-test50</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test51"></use>
                </svg>
                        <div class="name">help</div>
                        <div class="code-name">#icon-icon-test51</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test52"></use>
                </svg>
                        <div class="name">caution</div>
                        <div class="code-name">#icon-icon-test52</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test53"></use>
                </svg>
                        <div class="name">caution_filled</div>
                        <div class="code-name">#icon-icon-test53</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test54"></use>
                </svg>
                        <div class="name">like</div>
                        <div class="code-name">#icon-icon-test54</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test55"></use>
                </svg>
                        <div class="name">like_filled</div>
                        <div class="code-name">#icon-icon-test55</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test56"></use>
                </svg>
                        <div class="name">star</div>
                        <div class="code-name">#icon-icon-test56</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test57"></use>
                </svg>
                        <div class="name">star_filled</div>
                        <div class="code-name">#icon-icon-test57</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test58"></use>
                </svg>
                        <div class="name">arrow_up</div>
                        <div class="code-name">#icon-icon-test58</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test59"></use>
                </svg>
                        <div class="name">arrow_left</div>
                        <div class="code-name">#icon-icon-test59</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test60"></use>
                </svg>
                        <div class="name">arrow_down</div>
                        <div class="code-name">#icon-icon-test60</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test61"></use>
                </svg>
                        <div class="name">arrow_right</div>
                        <div class="code-name">#icon-icon-test61</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test62"></use>
                </svg>
                        <div class="name">page_first</div>
                        <div class="code-name">#icon-icon-test62</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test63"></use>
                </svg>
                        <div class="name">down_to_bottom</div>
                        <div class="code-name">#icon-icon-test63</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test64"></use>
                </svg>
                        <div class="name">up_to_top</div>
                        <div class="code-name">#icon-icon-test64</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test65"></use>
                </svg>
                        <div class="name">page_last</div>
                        <div class="code-name">#icon-icon-test65</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test66"></use>
                </svg>
                        <div class="name">page_turning_left</div>
                        <div class="code-name">#icon-icon-test66</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test67"></use>
                </svg>
                        <div class="name">page_turning_right</div>
                        <div class="code-name">#icon-icon-test67</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test68"></use>
                </svg>
                        <div class="name">show_less</div>
                        <div class="code-name">#icon-icon-test68</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test69"></use>
                </svg>
                        <div class="name">show_more</div>
                        <div class="code-name">#icon-icon-test69</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test70"></use>
                </svg>
                        <div class="name">social_fb</div>
                        <div class="code-name">#icon-icon-test70</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test71"></use>
                </svg>
                        <div class="name">social_linkedin</div>
                        <div class="code-name">#icon-icon-test71</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test72"></use>
                </svg>
                        <div class="name">social_sina</div>
                        <div class="code-name">#icon-icon-test72</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test73"></use>
                </svg>
                        <div class="name">social_google</div>
                        <div class="code-name">#icon-icon-test73</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test74"></use>
                </svg>
                        <div class="name">social_naver</div>
                        <div class="code-name">#icon-icon-test74</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test75"></use>
                </svg>
                        <div class="name">social_stackflow</div>
                        <div class="code-name">#icon-icon-test75</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test76"></use>
                </svg>
                        <div class="name">social_youtube</div>
                        <div class="code-name">#icon-icon-test76</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test77"></use>
                </svg>
                        <div class="name">social_github</div>
                        <div class="code-name">#icon-icon-test77</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test78"></use>
                </svg>
                        <div class="name">social_twitter</div>
                        <div class="code-name">#icon-icon-test78</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test79"></use>
                </svg>
                        <div class="name">applets</div>
                        <div class="code-name">#icon-icon-test79</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test80"></use>
                </svg>
                        <div class="name">social_wechat</div>
                        <div class="code-name">#icon-icon-test80</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test81"></use>
                </svg>
                        <div class="name">social_server_fault</div>
                        <div class="code-name">#icon-icon-test81</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test82"></use>
                </svg>
                        <div class="name">balance</div>
                        <div class="code-name">#icon-icon-test82</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test83"></use>
                </svg>
                        <div class="name">go-to-link</div>
                        <div class="code-name">#icon-icon-test83</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test84"></use>
                </svg>
                        <div class="name">benefits</div>
                        <div class="code-name">#icon-icon-test84</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingtalk"></use>
                </svg>
                        <div class="name">dingtalk</div>
                        <div class="code-name">#icon-dingtalk</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay"></use>
                </svg>
                        <div class="name">alipay</div>
                        <div class="code-name">#icon-alipay</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taobao"></use>
                </svg>
                        <div class="name">taobao</div>
                        <div class="code-name">#icon-taobao</div>
                    </li>

                    <li class="dib">
                        <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test85"></use>
                </svg>
                        <div class="name">1688</div>
                        <div class="code-name">#icon-icon-test85</div>
                    </li>

                </ul>
                <div class="article markdown">
                    <h2 id="symbol-">Symbol 引用</h2>
                    <hr>

                    <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
                    <ul>
                        <li>支持多色图标了，不再受单色限制。</li>
                        <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
                        <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
                        <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
                    </ul>
                    <p>使用步骤如下：</p>
                    <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
                    <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
                    <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
                    <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
                    <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
                    <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
                </div>
            </div>

        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.tab-container .content:first').show()

            $('#tabs li').click(function(e) {
                var tabContent = $('.tab-container .content')
                var index = $(this).index()

                if ($(this).hasClass('active')) {
                    return
                } else {
                    $('#tabs li').removeClass('active')
                    $(this).addClass('active')

                    tabContent.hide().eq(index).fadeIn()
                }
            })
        })
    </script>
</body>

</html>